<template>
    <div ref="jmodal" class="position-absolute jmodalContent" style="z-index: 100"
         :style="jStyle" v-if="visible" id="jmodal22">
        <div  ref="jmodalHeader" class="bg-primary flexCenterBetween text-white px-10 py-4 modalHeader">
            <div class="">
                {{title}}
            </div>
            <a-icon type="close" class="cursor-pointer" @click="closeModal"/>
        </div>
        <div class="bg-white p-10">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import {isNumbers} from "../utils/js-utils";

    export default {
        name: "jmodal",
        props: {
            visible: {default: false},
            title: {default: "modalTitle"},
            top: {default: 100},
            left: {default: null},
            right: {default: null},
            width: {default: 520}
        },
        watch: {
            visible(newValue, oldValue) {
                if (newValue) {
                    this.$nextTick(() => {
                        // console.log('$nextTick')
                        // console.log(this.$refs.jmodal)
                        document.addEventListener('mousedown', this.down);
                        document.addEventListener('mouseup', this.up);
                        document.addEventListener('click',this.defaultClose)
                    })
                } else {
                    document.removeEventListener('mousedown', this.down);
                    document.removeEventListener('mouseup', this.up);
                    document.removeEventListener('click',this.defaultClose)
                }

            }
        },
        data() {
            return {
                jleft: 100,
                ww: window.innerWidth,
                jStyle: {
                    top: this.top + 'px',
                    width: this.width + 'px'
                },
                offsetX: 0,
                offsetY: 0,
            }
        }, methods: {
            closeModal() {
                this.$emit("cancel")
            },
            down(e) {
                if (e.target == this.$refs.jmodalHeader) {
                    this.offsetX = e.clientX - this.$refs.jmodal.offsetLeft
                    this.offsetY = e.clientY - this.$refs.jmodal.offsetTop
                    document.addEventListener('mousemove', this.move);
                }
            }, move(e) {
                this.$refs.jmodal.style.left = (e.clientX - this.offsetX) + 'px';
                this.$refs.jmodal.style.top = (e.clientY - this.offsetY) + 'px';
            }, up(e) {
                document.removeEventListener('mousemove', this.move);
            },
            defaultClose(e){
                // console.log(this.$refs.jmodal)
                // e.preventDefault();
                // var x=e.clientX;
                // var y=e.clientY;
                // var x1 = this.$refs.jmodal.offsetLeft;
                // var y1 = this.$refs.jmodal.offsetTop;
                // var x2 = this.$refs.jmodal.offsetLeft + this.$refs.jmodal.offsetWidth;
                // var y2 = this.$refs.jmodal.offsetTop+this.$refs.jmodal.offsetHeight;
                // if(x<x1||y<y1||x>x2||y>y2){
                //     this.closeModal();
                // }
            }
        }, mounted() {
            if (this.left) {
                if (isNumbers(this.left)) {
                    this.jStyle.left = this.left + 'px'
                }else{
                    this.jStyle.left = this.left
                }
            } else if (this.right) {
                this.jStyle.right = this.right + 'px'
            }
            console.log("mounted")
            console.log(11111)
            console.log(this.jStyle)
        }, beforeDestroy() {
            console.log("beforeDestroy")
        }
    }
</script>

<style scoped>

    .jmodalContent {
        border: 1px solid rgba(0, 0, 0, .2);
        box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
    }

    .modalHeader {
        cursor: move;
    }
</style>
